<template>
  <div class="layout-container">
    <!-- 左侧菜单区域 -->
    <el-menu
        :default-active="activeIndex"
        class="left-menu"
        @open="handleOpen"
        @close="handleClose"
        background-color="#222b45"
        text-color="#bbbbbb"
        active-text-color="#409EFF"
        router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-price-tag"></i>
          <span>基础功能</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/user" :key="index">
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/driverandcar" :key="index">
            <span>司机及车辆管理</span>
          </el-menu-item>
          <el-menu-item index="/dingdan" :key="index">
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="/revenue" :key="index">
            <span>财务管理</span>
          </el-menu-item>
          <el-menu-item index="/basicInformation" :key="index">
            <span>基础信息配置</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-message"></i>
          <span>运营管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/paidan" :key="index">
            <span>定价规则</span>
          </el-menu-item>
          <el-menu-item index="/guize" :key="index">
            <span>派单策略</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>统计分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/candidateList" :key="index">
            <span>订单响应率</span>
          </el-menu-item>
          <el-menu-item index="/orderResponse" :key="index">
            <span>订单响应速度</span>
          </el-menu-item>
          <el-menu-item index="/createCandidate" :key="index">
            <span>服务评价不满意率</span>
          </el-menu-item>
          <el-menu-item index="/marketing" :key="index">
            <span>营收情况</span>
          </el-menu-item>

        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>运营驾驶舱</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/tabs" :key="index">
            <span>驾驶舱</span>
          </el-menu-item>
          <el-menu-item index="/orderPercentage" :key="index">
            <span>订单及订单完成量</span>
          </el-menu-item>
          <el-menu-item index="/flowDataTabs" :key="index">
            <span>流水情况</span>
          </el-menu-item>
          <el-menu-item index="/averageDriverTabs" :key="index">
            <span>司机人均承担</span>
          </el-menu-item>

        </el-menu-item-group>
      </el-submenu>


    </el-menu>
    <!-- 右侧内容区域 -->
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: null,
      activeIndex: '' // 默认激活的菜单索引，这里设置为首页路由
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log('菜单展开：', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('菜单关闭：', key, keyPath);
    }
  }
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 200px;
  min-width: 150px;
}

.right-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>
